<template>
	<van-nav-bar title="温升计算器" left-text="返回" left-arrow @click-left="onClickLeft"/>
	<van-field label-width="45" v-model="shellFrame" type="number" label="壳架:" placeholder="壳架" clearable />
	<van-row>
		<van-col span="12" class="row-title" style="border-right: 1px dashed #cdcde6;">
			电流表(A)
		</van-col>
		<van-col span="12" class="row-title">
			互感器(KA)
		</van-col>
	</van-row>
	<van-row>
		<van-col span="12" style="padding: 0 5px;border-right: 1px dashed #cdcde6;">
			<van-cell-group>
				<van-field label-width="45" v-model="ammeterRange" name="量程" label="量程:" type="number" clearable />
	
				<van-field label-width="45" v-model="ammeter" is-link readonly label="档位:" placeholder="选择档位"
					@click="ammeterShowPicker = true" />
				<van-popup v-model:show="ammeterShowPicker" round position="bottom">
					<van-picker :default-index="3" :columns="ammeterList" @cancel="ammeterShowPicker = false"
						@confirm="ammeterShowPickerOnConfirm" />
				</van-popup>
			</van-cell-group>
		</van-col>
		<van-col span="12" style="padding: 0 5px;">
			<van-cell-group>
				<van-field label-width="45" v-model="transformerThan" name="比值" label="比值:" type="number"
					clearable />
	
				<van-field label-width="45" v-model="transformer" is-link readonly label="档位:"
					placeholder="选择档位" @click="transformerShowPicker = true" />
				<van-popup v-model:show="transformerShowPicker" round position="bottom">
					<van-picker :default-index="0" :columns="transformerList"
						@cancel="transformerShowPicker = false" @confirm="transformerShowPickerOnConfirm" />
				</van-popup>
			</van-cell-group>
		</van-col>
	</van-row>
	<van-row style="padding: 5px 20px; text-align: left; font-size: 0.42667rem">
		<van-col span="24">互感器: {{ transformer * 1000 }} / {{ transformerThan }} = <span class="font-red-color">{{ transformerK}}</span></van-col>
	</van-row>
	<van-row style="padding: 5px 20px; text-align: left; font-size: 0.42667rem">
		<van-col span="24">满量程: {{ ammeter }} * {{ transformerK }} = <span class="font-red-color">{{ammeter * transformerK}}</span> (A)</van-col>
	</van-row>
	<van-row style="padding: 5px 20px; text-align: left; font-size: 0.42667rem">
		<van-col span="24">每小格: {{ transformerK }} / {{ ammeterRange }} = <span class="font-red-color">{{transformerK / ammeterRange}}</span> (A)</van-col>
	</van-row>
	<van-row style="padding: 5px 20px; text-align: left; font-size: 0.42667rem">
		<van-col span="24">
			{{ shellFrame }} / {{ transformerK / ammeterRange }} / {{ ammeter }} = <span class="font-red-color">{{shellFrame / (transformerK / ammeterRange) / ammeter}}</span> 格
		</van-col>
	</van-row>
	<van-notice-bar
	  v-if="limitValue >= 95"
	  wrapable
	  :scrollable="false"
	  text="在极限量程边缘,疯狂徘徊,建议提高档位"
	/>
</template>

<script>
	import {
		ref
	} from 'vue';
	import {
		Dialog,
		Notify
	} from 'vant';
	import CONSTANT from '@/utils/constant.js'
	
	export default {
		name: 'WenSheng',
		components: {},
		setup() {
			const shellFrame = ref(1600);
			
			const ammeterRange = ref(100);
			const ammeter = ref(2.5);
			const ammeterShowPicker = ref(false);
			const ammeterList = [2.5, 5];
			
			const ammeterShowPickerOnConfirm = (value) => {
				ammeter.value = value;
				ammeterShowPicker.value = false;
			};
			
			const transformerThan = ref(5);
			const transformer = ref(2);
			const transformerList = [2, 5, 10, 30];
			const transformerShowPicker = ref(false);
			
			const transformerShowPickerOnConfirm = (value) => {
				transformer.value = value;
				transformerShowPicker.value = false;
			};
			
			return {
				shellFrame,
				ammeterRange,
				ammeter,
				ammeterShowPicker,
				ammeterList,
				ammeterShowPickerOnConfirm,
				transformerThan,
				transformer,
				transformerList,
				transformerShowPicker,
				transformerShowPickerOnConfirm
			}
		},
		methods: {
			onClickLeft: function() {
				this.$router.go(-1)
			}
		},
		computed: {
			transformerK: function(){
				return this.transformer * 1000 / this.transformerThan;
			},
			limitValue: function() {
				return (this.shellFrame / (this.transformerK / this.ammeterRange) / this.ammeter / this.ammeterRange) * 100;
			}
		}
		
	}
</script>

<style>
	.font-red-color {
		color: #ff3b3b;
	}
</style>
